<template>
    <div class="user-list">
        <ToolBar>
            <el-button type="primary" icon="el-icon-plus" size="small" @click="editUser(false)">添加</el-button>
            <div style="float: right">
                <el-input
                    placeholder="请输入用户昵称！"
                    size="small"
                    style="width: 140px"
                    v-model="params.name"
                    @clear="searchUser"
                    clearable>
                </el-input>
                <el-button @click="searchUser" type="success" icon="el-icon-search" size="small"></el-button>
            </div>
        </ToolBar>
        <el-table
            :data="usersData"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            border
            ref="table"
            style="width: 100%">
            <el-table-column
                prop="username"
                label="用户名"
                width="200">
            </el-table-column>
            <el-table-column
                label="用户头像"
                width="80">
                <img slot-scope="scope" :src="scope.row.avatar" alt="" width="60px" height="60px">
            </el-table-column>
            <el-table-column
                prop="email"
                label="邮箱"
                width="300">
            </el-table-column>
            <el-table-column
                prop="role"
                label="角色">
                <div slot-scope="scope" style="width: 100%;text-align: center" v-if="scope.row.roles">
                    <el-tag v-for="(val,key)  in  scope.row.roles " :key="key" style="margin-right: 10px">{{
                        val.name}}
                    </el-tag>
                </div>
            </el-table-column>
            <el-table-column
                prop="actived"
                width="100"
                label="状态">
                <div slot-scope="scope" style="width: 100%;text-align: center">
                    <el-tag v-if="scope.row.actived == 1" type="success">正常</el-tag>
                    <el-tag v-else-if="scope.row.actived == 2" type="danger">禁用</el-tag>
                </div>
            </el-table-column>
            <el-table-column
                prop="created_at"
                label="创建时间">
            </el-table-column>
            <el-table-column
                label="操作"
                width="180">
                <template slot-scope="scope">
                    <el-button @click="editUser(scope.row)" type="primary" icon="el-icon-edit" size="small"
                               circle v-if="scope.row.username != $store.state.username"></el-button>
                    <el-button  type="primary" icon="el-icon-edit" size="small"
                               circle v-else disabled=""></el-button>
                    <el-button @click="deleteUser(scope.row.id)" v-if="scope.row.username != $store.state.username"
                               type="danger"
                               icon="el-icon-delete" circle size="small"></el-button>
                    <el-button v-else icon="el-icon-delete" circle
                               size="small" disabled="" type="danger"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <UserEdit
            :title="userEditTitle"
            :dialogFormVisible="dialogFormVisible"
            :data="currentEditUser"
            :roleData="roleData"
            @val-change="userEditChange"
            @cancel="dialogFormVisible = false"
        >
        </UserEdit>
        <Paginate
            api="getUserList"
            :params="params"
            :refresh="refresh"
            @val-change="PaginateData"
        >
        </Paginate>
    </div>
</template>


<script>
    import ToolBar from '../../components/ToolBar.vue';
    import HelpHint from '../../components/HelpHint.vue';
    import Paginate from '../../components/Paginate.vue';
    import UserEdit from './UserEdit';

    export default {
        data() {
            return {
                userEditTitle: '角色编辑',
                currentEditUser: false,
                dialogFormVisible: false,
                currentEditPermissions: false,
                params: {
                    search: []
                },
                usersData: [],
                roleData: [],
                refresh: false,
                loading: true
            }
        },
        methods: {
            searchUser() {
                let tableRow = this.$refs.table.$el.querySelectorAll('tbody tr');
                let tableRowHeight = tableRow[1].offsetHeight;
                let isjump = false;
                for (let i = 0; i < this.usersData.length; i++) {
                    if (this.params.name && this.usersData[i].username.indexOf(this.params.name) != -1) {
                        tableRow[i].style.backgroundColor = '#85ce61';
                        if (!isjump) {
                            scrollTo(0, i * tableRowHeight + 66);
                            isjump = true;
                        }
                    } else {
                        tableRow[i].style.backgroundColor = '#fff';
                    }
                }
            },
            editUser(data) {
                if (data) {
                    data.actived = data.actived.toString();
                    this.currentEditUser = data;
                } else {
                    this.currentEditUser = false;
                }
                this.dialogFormVisible = true;
            },
            userEditChange(data) {
                let self = this;
                if (this.currentEditUser === false) {
                    self.$Api.addUser({params: data}, (c) => {
                        if (c.code == 200) {
                            this.dialogFormVisible = false;
                            this.refresh = !this.refresh;
                            self.$notify({
                                title: self.userEditTitle + '成功！',
                                message: '添加成功',
                                type: 'success'
                            });
                        } else {
                            self.$notify({
                                title: self.userEditTitle + '失败！',
                                message: c.data,
                                type: 'error'
                            });
                        }
                    });
                } else {
                    self.$Api.updateUser(data, (c) => {
                        if (c.code == 200) {
                            this.dialogFormVisible = false;
                            this.refresh = !this.refresh;
                            self.$notify({
                                title: self.userEditTitle + '成功！',
                                message: c.data,
                                type: 'success'
                            });
                        } else {
                            self.$notify({
                                title: self.userEditTitle + '失败！',
                                message: c.data,
                                type: 'error'
                            });
                        }
                    });
                }

            },
            UploadUser(data) {

            },
            deleteUser(id) {
                let APP = this

                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    APP.$Api.deleteUser({id: id}, (c) => {
                        if (c.code == 200) {
                            APP.refresh = !APP.refresh
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        } else {
                            this.$message({
                                type: 'error',
                                message: c.data
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            PaginateData(list) {
                this.usersData = list;
                this.loading = false
            },


        },
        mounted: function () {
            let APP = this;
            //获取角色数据
            APP.$Api.getRoleList({}, (c) => {
                if (c.code == 200) {
                    APP.roleData = c.data;
                } else {
                    APP.$notify({
                        title: '请求角色列表失败',
                        message: c.data,
                        type: 'error'
                    });
                }

            })
        },
        components: {
            ToolBar, HelpHint, UserEdit, Paginate
        }
    }
</script>
<style lang="less">

</style>
